<template>
  <a-drawer class="drawer-relation-editor" width="1200px"
            @cancel="close" @close="close" :visible="visible">
    <DrawerRelationEditorHeader :editingRelation="editingRelation" @save="save"/>
    <Layout class="drawer-relation-editor-body">
      <LayoutSide>
        <DrawerRelationEditorLeftSide @close="close"
          v-model="selectedItemKey" @refreshFormDefinition="refreshFormDefinition"
          v-show="editFormRelations && editFormRelations.length"
          @editRelation="editSingleRelation"
          :editFormRelations="editFormRelations"/>
      </LayoutSide>
      <LayoutBody>
        <RelationEditor @editingRelationChange="r => editingRelation = r"
          v-if="showRelationEditor" :formDefinition="formDefinition"
          ref="RelationEditor"/>
      </LayoutBody>
    </Layout>
    <template slot="footer"><span/></template>
  </a-drawer>
</template>
<script>
import DrawerRelationEditorHeader from '@comp/hhd/design/relation/DrawerRelationEditorHeader.vue'
import Layout from '@comp/hhd/layout/Layout.vue'
import LayoutSide from '@comp/hhd/layout/LayoutSide.vue'
import LayoutBody from '@comp/hhd/layout/LayoutBody.vue'
import RelationEditor from '@comp/hhd/design/relation/RelationEditor.vue'
import { createProps } from '@/utils'
import { createFormDefinition } from '@comp/hhd/design/FormDesigner/types'
import DrawerRelationEditorLeftSide
  from '@comp/hhd/design/relation/DrawerRelationEditorLeftSide/DrawerRelationEditorLeftSide.vue'

export default {
  name: 'DrawerRelationListEditor',
  components: {
    DrawerRelationEditorLeftSide,
    RelationEditor,
    DrawerRelationEditorHeader, Layout,
    LayoutSide,
    LayoutBody
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      sourceFormId: undefined,
      targetFormId: undefined,
      selectedItemKey: undefined, //可能选择的是触发, 也可能是关联
      visible: false,
      title: '业务关系设置',
      pageStatus: undefined,
      pageAction: 'add',
      editorType: undefined,
      editingRelation: undefined,
    };
  },
  methods: {
    save() {
      this.$refs[this.editorType].save(() => {
        if(this.pageStatus === 'edit') {
          this.selectedItemKey = undefined;
          this.editingRelation = undefined;
          this.$message.success('保存成功');
        } else {
          this.close();
        }
        this.refreshFormDefinition();
      });
    },
    refreshFormDefinition() {
      this.$emit('refreshFormDefinition');
    },
    editSingleRelation(relation) {
      this.editorType = 'RelationEditor';
      this.editingRelation = JSON.parse(JSON.stringify(relation));
      this.$nextTick(() => {
        this.$refs.RelationEditor.edit(this.editingRelation);
      });
    },
    editRelations({sourceFormId, targetFormId}) {
      this.pageStatus = 'edit';
      this.editingRelation = undefined;
      this.selectedItemKey = undefined;
      this.sourceFormId = sourceFormId;
      this.targetFormId = targetFormId;
      this.open();
    },
    addNewRelation() {
      this.pageAction = 'add';
      this.editingRelation = undefined;
      this.selectedItemKey = undefined;
      this.sourceFormId = undefined;
      this.targetFormId = undefined;
      this.open();
      this.$nextTick(() => {
        this.editorType = 'RelationEditor';
        this.pageStatus = 'add';
        this.$nextTick(() => {
          this.$refs.RelationEditor.addNew();
        });
      });
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
  computed: {
    editFormRelations() {
      let relations = this.formDefinition.relations || [];
      return relations.filter(item => item.relationSourceFormId === this.sourceFormId && item.relationTargetFormId === this.targetFormId) || [];
    },
    showRelationEditor() {
      if (this.editorType !== 'RelationEditor') return false;
      if (this.pageStatus === 'add') return true;
      if (this.pageStatus === 'edit' && !this.editingRelation) return false;
      return true;
    },
  }
};
</script>
<style>
.drawer-relation-editor .ant-drawer-body {
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding: 0;
  padding-bottom: 10px !important;
}

.drawer-relation-editor-body {
  flex: 1;
  overflow: auto;
}

.drawer-relation-editor {
}
</style>